<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            li {
                list-style-type: none;
            }

            .box {
                width: 250px;
                margin: 100px auto;
            }

            .box li {
                float: left;
                width: 24px;
                height: 24px;
                background-color: pink;
                margin: 15px;
                background: url(./pic/sprite.png) no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script type="text/javascript">
            var lis = document.querySelectorAll('li');
            for (var i = 0; i < lis.length; i++) {
                var y = i * 44;
                lis[i].style.backgroundPosition = '0 -' + y + 'px';
            }
        </script>

    </body>
</html>
